<template>
    <div>
        <nav-bar>
            <template v-slot:default>
                订单预览
            </template>
        </nav-bar>
        <div class="one">
            <div class="one_1" >
                <span>姓名：{{address.name}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                <span>手机：{{address.phone}}</span>
            </div>
            <div class="one_2">
                <span>
                    地址：
                    {{address.province}}
                    {{address.city}}
                    {{address.county}}
                    {{address.address}}
                </span>
            </div>
            <van-icon class="arrow one_3" name="arrow" @click="goTo"></van-icon>    
        </div>
        <div class="TT">
            <div class="two" v-for="(item,index) in cartList" :key="index">
                <div class="two_1">
                    <img v-lazy="item.goods.cover_url" />
                </div>
                <div class="two_2">
                    <div>
                        <p>{{item.goods.title}}</p>
                        <p>{{item.num}}</p> 
                    </div>   
                </div>
                <div class="two_3">
                    <div>
                        <p>￥{{item.goods.price+'.00'}}</p>
                    </div>   
                </div>
            </div>
        </div>
        <van-submit-bar 
            :price="total *100" 
            class="there" 
            button-text="提交订单" 
            @submit="handleCreateOrder" >
            商品金额
        </van-submit-bar>
        <van-popup 
            closeable
            :close-on-click-overlay="false"
            :show="showPay"
            position="bottom"
            :style="{height:'30%'}"
            @close="close"
            >
            <!-- <div :style="{width:'90%',margin:'0 auto',padding:'50px 0'}">
                <van-button :style="{marginBottom:'10px'}" color="#1989fa" block>
                    支付宝支付
                </van-button>
                <van-button color="#4fc08d" block>
                    微信支付
                </van-button>
            </div> -->
            <van-grid :border="false" :column-num="2">
                <van-grid-item>
                    支付宝二维码<br>
                    <van-image width="150" height="150" :src="aliyun" />
                </van-grid-item>
                <van-grid-item>
                    微信二维码<br>
                    <van-image width="150" height="150" :src="wechat" />
                </van-grid-item>
            </van-grid>
        </van-popup>
    </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import {reactive,onMounted,toRefs,computed} from 'vue'
import {getOrderPreview,createOrder,payOrder,payOrderStatus} from 'network/order'
import {Toast} from 'vant'
import {useRoute,useRouter} from 'vue-router'
import {useStore} from 'vuex'
export default {
    components:{
        NavBar
    },
    setup(){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        // 状态
        const state = reactive({
            cartList:[],//购物车列表
            address:{},//地址信息
            showPay:false,
            orderNo:'',
            aliyun:'',
            wechat:''
        })
        //获取地址信息
        const init = ()=>{
            Toast.loading({message:'加载中....',forbidClick:true});
            // 获取信息
            getOrderPreview().then(res=>{
                
                // 获取默认地址
                let address = res.address.filter(n=>n.is_default == '1');
                console.log(address);
                // 如果原先没有默认地址
                if(address.length == 0){
                    // 状态的地址信息
                    state.address = {
                        address:'还没有设置默认地址信息，请选择或添加！'
                    }
                }else{
                    // 有的话
                    state.address = address[0];
                }
                // 获取购物车信息
                state.cartList = res.carts;
                Toast.clear()
            })
        }
        onMounted(()=>{
            init();
        })
        // 计算总价钱
        const total = computed(()=>{
            let sum = 0;
            state.cartList.forEach(item=>{
                sum += parseInt(item.num) * parseInt(item.goods.price);
            })
            return sum;
        })
        //返回到编辑页面
        const goTo = ()=>{
            router.push({path:'/address'})
        }
        // 生成订单方法
        const handleCreateOrder = ()=>{
            const params = {
                // 把订单的id传给-address_id
                address_id: state.address.id
            }
            // 创建订单-调用API接口
            createOrder(params).then(res=>{
                Toast('创建订单成功！');
                // 重新加载
                store.dispatch('updateCart');
                // 显示支付宝和微信
                state.showPay = true;
                // 订单id
                state.orderNo = res.id;
                // 接口--获取微信还是支付宝
                payOrder(state.orderNo,{type:'aliyun'}).then(res=>{
                    state.aliyun = res.qr_code_url;
                    state.wechat = res.qr_code_url;
                })
                // payOrder(state.orderNo,{type:'wechat'}).then(res=>{
                //     // state.aliyun = res.qr_code_url;
                //     state.wechat = res.qr_code_url
                // })

                // 轮询查看
                const timer = setInterval(()=>{
                    payOrderStatus(state.orderNo).then(res=>{
                        clearInterval(timer);
                        router.push({path:'/orderdetail'})
                    })
                },2000)
                // 因为没有二维码，所以我现在3秒后自动跳转到订单详情页面
                // const timer = setInterval(()=>{
                //     Toast.success('正在跳转');
                //     clearInterval(timer);
                //     // 把id传过去
                //     router.push({path:'/orderdetail',query:{id:state.orderNo}});
                // },3000)
            })
        }

        const close = () =>{
            router.push({path:'/orderdetail',query:{id:state.orderNo}});
        }

        return{
            ...toRefs(state),
            goTo,
            handleCreateOrder,
            close,
            total
        }
    }
}
</script>
<style scoped lang="scss">
    .one{
        width: 100%;
        height: 90px;
        margin-top: 45px;
        position: relative;
        border-bottom: 1px solid lightblue;
        font-size: 15px;
        .one_1{
            position: absolute;
            top: 20px;
            padding-left: 20px;
        }
        .one_2{
            position: absolute;
            top: 50px;
            padding-left: 20px;
        }
        .one_3{
            position: absolute;
            right: 15px;
            top: 40px;
        }
    }
    .TT{
        margin-bottom: 150px;
    }
    .two{
        width: 100%;
        height: 150px;
        display: flex;
        border-bottom: 1px solid lightblue;
        .two_1{
            flex: 1;
            position: relative;
            img{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 30px;
                left: 20px;
            }
        }
        .two_2{
            flex: 2;
            position: relative;
            p{
                font-size: 15px;
                padding-bottom: 28px;
            }
            div{
                position: absolute;
                top: 40px;
                left: 45px;
            }
        }
        .two_3{
            flex: 1;
            position: relative;
            div{
                position: absolute;
                top: 40px;
            }
        }
    }
    .there{
        margin-bottom: 52px;
    }
</style>
